<template>
  <div id="233" ref="viewport" class="viewport">
    <div style="height:20px;font-size:14px;background:black">
      <el-row>
        <el-col :span="11">
          <div style="color:white;margin-left:10px;" @click="handleBack()"><a>返回</a></div>
        </el-col>
        <el-col :span="12">
          <span style="color:white">{{ info }}</span>
        </el-col>
      </el-row>
    </div>
    <!-- tabindex allows for div to be focused -->
    <div ref="display" class="display" tabindex="0" />
    <!-- 用于获取屏幕dpi-->
    <div id="dpi" ref="dpi" />
  </div>
</template>

<script>
import Guacamole from 'guacamole-common-js'
import GuacMouse from '../lib/GuacMouse'
import states from '../lib/states'
import clipboard from '../lib/clipboard'
Guacamole.Mouse = GuacMouse.mouse
const wsUrl = `ws://${location.host}/websocket/guacamole`
const httpUrl = `http://${location.host}/tunnel`
export default {
  data() {
    return {
      connected: false,
      display: null,
      currentAdjustedHeight: null,
      client: null,
      keyboard: null,
      mouse: null,
      lastEvent: null,
      connectionState: states.IDLE,
      errorMessage: '',
      arguments: {},
      dpi: '',
      screen_width: null,
      screen_height: null,
      host_id: null,
      token: null,
      info: null
    }
  },
  watch: {
    connectionState(state) {
      // this.$refs.modal.show(state, this.errorMessage)
      console.log(state)
    }
  },
  created() {
    this.host_id = this.$route.query.id
    this.token = this.$route.query.token
    this.info = this.$route.query.info
  },
  mounted() {
    this.connect()
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },
    send(cmd) {
      if (!this.client) {
        return
      }
      for (const c of cmd.data) {
        this.client.sendKeyEvent(1, c.charCodeAt(0))
      }
    },
    copy(cmd) {
      if (!this.client) {
        return
      }
      clipboard.cache = {
        type: 'text/plain',
        data: cmd.data
      }
      clipboard.setRemoteClipboard(this.client)
    },
    // 鼠标状态
    handleMouseState(mouseState) {
      const scaledMouseState = Object.assign({}, mouseState, {
        x: mouseState.x / this.display.getScale(),
        y: mouseState.y / this.display.getScale()
      })
      this.client.sendMouseState(scaledMouseState)
    },
    connect() {
      let tunnel
      if (window.WebSocket && !this.forceHttp) {
        tunnel = new Guacamole.WebSocketTunnel(wsUrl)
      } else {
        tunnel = new Guacamole.HTTPTunnel(httpUrl, true)
      }
      if (this.client) {
        this.display.scale(0)
        this.uninstallKeyboard()
      }
      this.client = new Guacamole.Client(tunnel)
      clipboard.install(this.client)
      this.client.onerror = error => {
        console.log(error)
        this.$message.error(error)
        this.client.disconnect()
      }
      this.client.onclipboard = clipboard.onClipboard
      this.display = this.client.getDisplay()
      const displayElm = this.$refs.display
      displayElm.appendChild(this.display.getElement())
      displayElm.addEventListener('contextmenu', e => {
        e.stopPropagation()
        if (e.preventDefault) {
          e.preventDefault()
        }
        e.returnValue = false
      })
      this.dpi = this.$refs.dpi.offsetHeight
      const elm = this.$refs.viewport
      this.screen_width = elm.offsetWidth
      this.screen_height = window.innerHeight - 80
      this.client.connect('host_id=' + this.host_id + '&width=' + this.screen_width + '&height=' + this.screen_height + '&dpi=' + this.dpi)
      window.onunload = () => this.client.disconnect()
      this.mouse = new Guacamole.Mouse(displayElm)
      // Hide software cursor when mouse leaves display
      this.mouse.onmouseout = () => {
        if (!this.display) return
        this.display.showCursor(false)
      }
      // allows focusing on the display div so that keyboard doesn't always go to session
      displayElm.onclick = () => {
        displayElm.focus()
      }
      displayElm.onfocus = () => {
        displayElm.className = 'focus'
      }
      displayElm.onblur = () => {
        displayElm.className = ''
      }
      this.keyboard = new Guacamole.Keyboard(displayElm)
      this.installKeyboard()
      this.mouse.onmousedown = this.mouse.onmouseup = this.mouse.onmousemove = this.handleMouseState
    },
    installKeyboard() {
      this.keyboard.onkeydown = keysym => {
        this.client.sendKeyEvent(1, keysym)
      }
      this.keyboard.onkeyup = keysym => {
        this.client.sendKeyEvent(0, keysym)
      }
    },
    uninstallKeyboard() {
      this.keyboard.onkeydown = this.keyboard.onkeyup = () => {}
    }
  }
}
</script>
<style scoped>
#dpi {
    height: 1in;
    width: 1in;
    position: absolute;
    left: -100%;
    top: -100%;
}
</style>
